<template>
  <div class="dialog_content">
    <el-dialog class="m_dialog" :title="dialogTitles[titleIndex] || titleIndex" :visible.sync="dialogVisible" width="800" append-to-body :before-close="cancel" :close-on-click-modal="false">
      <div class="content">
        <custom-form ref="form" :formModel="formModel" :formItemConfig="formItemConfig" :formRules="formRules" label-width="80px" label-position="left" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" class="btn_cancel">取 消</el-button>
        <el-button type="primary" @click="submitFrom" class="btn_primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listSafeDevice, getSafeDevice, addSafeDevice, updateSafeDevice, delSafeDevice, getStatSafeDeviceNumByType } from '@/api/fireSafetyEquipment';
import { getDeviceBrandList } from '@/api/system/device/brand';

import { mapState } from "vuex";

export default {
  name: "DeviceTypesForm",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    titleIndex: {
      type: Number | String,
      default: 0,
    },
    formData: {
      type: Object,
      default: () => { },
    },
    dictMap: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      // 设备品牌列表
      deviceBrandList: [],
      // 提交表单数据
      formModel: {
        sort: "",
        safeDeviceTypeId: "",
        deviceBrandId: "",
        deviceCode: "",
        sort: 0,
        deviceName: "",
        projectPointId: "",
        projectPointName: "",
        installTime: "",
        expireTime: "",
        installPosition: "",
        remark: ""
      },
      // 表单配置项
      formItemConfig: [
        {
          label: "安消设备类型",
          prop: "safeDeviceTypeId",
          filedLabel: "safeDeviceTypeName",
          filedValue: "safeDeviceTypeId",
          component: "BaseSelect",
          span: 12,
          labelWidth: "150px",
          clearable: true
        },
        {
          label: "设备品牌",
          prop: "deviceBrandId",
          span: 12,
          filedLabel: "deviceBrandName",
          filedValue: "deviceBrandId",
          component: "BaseSelect",
          labelWidth: "150px",
          clearable: true
        },
        {
          label: "设备编码",
          prop: "deviceCode",
          span: 12,
          labelWidth: "150px",
          clearable: true,
        },
        {
          label: "设备名称",
          prop: "deviceName",
          span: 12,
          labelWidth: "150px",
          clearable: true,
        },
        {
          label: "所属项目",
          prop: "projectPointName",
          span: 12,
          labelWidth: "150px",
          disabled: true,
        },
        {
          label: "安装日期",
          prop: "installTime",
          span: 12,
          component: 'BaseDateTimePicker',
          labelWidth: "150px",
          clearable: true,
          'value-format': "yyyy-MM-dd hh:mm:ss"
        },
        {
          label: "到期日期",
          prop: "expireTime",
          span: 12,
          component: 'BaseDateTimePicker',
          labelWidth: "150px",
          clearable: true,
          'value-format': "yyyy-MM-dd hh:mm:ss"
        },
        {
          label: "设备位置",
          prop: "installPosition",
          span: 24,
          labelWidth: "150px",
          clearable: true,
        },
        {
          label: "备注",
          prop: "remark",
          span: 24,
          labelWidth: "150px",
          clearable: true,
        },
      ],
      // 表单验证
      formRules: {
        safeDeviceTypeId: {
          required: true,
          message: "设备类型不能为空",
          trigger: "blur",
        },
        deviceBrandId: {
          required: true,
          message: "设备品牌不能为空",
          trigger: "blur",
        },
        deviceCode: {
          required: true,
          message: "设备编码不能为空",
          trigger: "blur",
        },
        deviceName: {
          required: true,
          message: "设备名称不能为空",
          trigger: "blur",
        },
        projectPointId: {
          required: true,
          message: "所属项目不能为空",
          trigger: "blur",
        },
        installPosition: {
          required: true,
          message: "设备位置不能为空",
          trigger: "blur",
        },
        installTime: {
          required: true,
          message: "安装日期不能为空",
          trigger: "blur",
        },
        expireTime: {
          required: true,
          message: "到期日期不能为空",
          trigger: "blur",
        },
      },
    };
  },
  computed: {
    ...mapState("dialog", ["dialogTitles"]),
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler() {
        this.formModel = JSON.parse(JSON.stringify(this.formData));
      },
    },
  },
  created() {
    let descModel = {}
    let data = this.formItemConfig.map(item => {
      descModel[item.prop] = ''
      return {
        fieIdName: item.prop,
        label: item.label,
        span: 2
      }
    })
    this.toGetDeviceBrandList()
  },
  mounted() { },
  methods: {
    // 获取设备品牌列表
    toGetDeviceBrandList(data) {
      this.$set(this.formItemConfig.filter(item => item.prop == 'deviceBrandId')[0], 'options', data)
    },
    // 设置安消设施类型数据列表
    setFacilityTypeList(list){
      if(list && list.length){
        let arr = list.filter(item => item.safeDeviceTypeName !== "全部")
        this.$set(this.formItemConfig.filter(item => item.prop == 'safeDeviceTypeId')[0], 'options', arr)
      }
    },
    getList() {
      this.$emit("getList");
    },
    cancel() {
      this.$emit("cancel");
      this.$refs["form"].toResetFields();
    },
    submitFrom() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.$utils.isNotEmpty(this.formModel.safeDeviceId)) {
            updateSafeDevice(this.formModel).then((res) => {
              if (res && 200 === res.code) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.cancel();
                this.getList();
              }
            });
          } else {
            addSafeDevice(this.formModel).then((res) => {
              if (res && 200 === res.code) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.cancel();
                this.getList();
              }
            });
          }
        }
      });
    },
  },
  components: {},
};
</script>

<style lang="less" scoped></style>
